<template>
  <div class="help-container">
    <div class="help-content">
      <!-- 左侧导航菜单 -->
      <div class="help-nav">
        <div class="nav-item" v-for="(item, index) in menuItems" :key="index">
          <div class="nav-title" @click="toggleSubMenu(index)">
            {{ item.title }}
          </div>
          <div class="sub-menu" v-show="item.isOpen">
            <router-link 
              v-for="(subItem, subIndex) in item.subItems" 
              :key="subIndex"
              :to="subItem.path"
              class="sub-item"
              :class="{ 'sub-itemActive': isActiveRoute(subItem.path) }"
            >
              {{ subItem.title }}
            </router-link>
          </div>
        </div>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="help-main">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
      
    </div>
    <div class="popular">
        Popular FAQ's in Categories
    </div>
    <div class="popular-list">
        <div class="popular-item" v-for="(item, index) in popularItems" :key="index" @click="handleClick(item)">
            <div class="popular-item-title" style="font-size: 14px; font-weight: bold !important;" >
                {{ item.title }}
            </div>
            <div class="popular-item-content">
              >
            </div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 菜单数据结构
// 菜单数据结构
const menuItems = ref([
  {
    title: 'Returns/Refunds',
    isOpen: true,
    subItems: [
      { title: 'How do I return?', path: '/help/returns/how-to-return?key=how_do_I_return&title=How do I return?' },
      { title: 'Refunds', path: '/help/returns/refunds-information?key=refunds&title=Refunds' },
      { title: 'Faulty Damaged or Incorrect Item received', path: '/help/returns/key-returns-information?key=faulty_damaged_or_incorrect_item_received&title=Faulty Damaged or Incorrect Item received' }
    ]
  },
  {
    title: 'Delivery',
    isOpen: false,
    subItems: [
      { title: 'How can I track my order?', path: '/help/delivery/i-have-a-problem-with-my-delivery?key=how_can_I_track_my_order&title=How can I track my order?' },
      { title: 'Delivery Information', path: '/help/delivery/delivery-key-information?key=delivery_information&title=Delivery Information' },
      { title: 'Delivery Options', path: '/help/delivery/tracking-my-order?key=delivery_options&title=Delivery Options' },
    ]
  },
  {
    title: 'My Account',
    isOpen: false,
    subItems: [
      { title: 'Sign in to My Account', path: '/help/account/signing-in-to-my-account?key=sign_in_to_my_account&title=Sign in to My Account' },
      { title: 'Changing personal details', path: '/help/account/i-have-forgotten-my-password?key=changing_personal_details&title=Changing personal details' },
      { title: 'Do I need an account to place an order?', path: '/help/account/opening-an-account?key=do_I_need_an_account_to_place_an_order&title=Do I need an account to place an order?' },
    ]
  },
  {
    title: 'Payments',
    isOpen: false,
    subItems: [
      { title: 'Ways to pay', path: '/help/payments/help-with-payments?key=ways_to_pay&title=Ways to pay' },
      { title: 'What if my payment is not accepted?', path: '/help/payments/what-payment-methods-can-i-use?key=what_if_my_payment_is_not_accepted&title=What if my payment is not accepted?' }
    ]
  },
  {
    title: 'Ordering',
    isOpen: false,
    subItems: [
      { title: 'How do I place an order?', path: '/help/shopping/has-my-order-gone-through?key=how_do_I_place_an_order&title=How do I place an order?' },
      { title: 'Has my order gone through?', path: '/help/shopping/amend-cancel-my-order?key=has_my_order_gone_through&title=Has my order gone through?' },
      { title: 'Can I change or cancel my order?', path: '/help/shopping/placing-an-order?key=can_I_change_or_cancel_my_order&title=Can I change or cancel my order?' },
    ]
  },
  {
    title: 'Other',
    isOpen: false,
    subItems: [
      { title: 'Can I get a VAT receipt?', path: '/help/other/i-have-a-complaint?key=can_I_get_a_vat_receipt&title=Can I get a VAT receipt?' },
      { title: 'How do I reserve an exchange', path: '/help/other/sizing-guides?key=how_do_I_reserve_an_exchange&title=How do I reserve an exchange' },
      { title: 'Contact Us', path: '/help/other/contact-us?key=contact_us&title=Contact Us' }
    ]
  }
]);
const popularItems = ref([
  { title: 'How do I return?', path: '/help/returns/how-to-return?key=how_do_I_return&title=How do I return?' },
  { title: 'Refunds', path: '/help/returns/refunds-information?key=refunds&title=Refunds' },
  { title: 'Faulty Damaged or Incorrect Item received', path: '/help/returns/key-returns-information?key=faulty_damaged_or_incorrect_item_received&title=Faulty Damaged or Incorrect Item received' },
  { title: 'How do I place an order?', path: '/help/shopping/has-my-order-gone-through?key=how_do_I_place_an_order&title=How do I place an order?' },
  { title: 'Delivery Information', path: '/help/delivery/delivery-key-information?key=delivery_information&title=Delivery Information' },
  { title: 'What if my payment is not accepted?', path: '/help/payments/what-payment-methods-can-i-use?key=what_if_my_payment_is_not_accepted&title=What if my payment is not accepted?' }

])
// 根据当前路由自动展开对应的菜单项

onMounted(() => {
  const currentPath = route.path;
  if (currentPath === '/help') {
    router.push(menuItems.value[0].subItems[0].path);
  } else {
    menuItems.value.forEach(item => {
      const hasActiveSubItem = item.subItems.some(subItem => subItem.path === currentPath);
      if (hasActiveSubItem) {
        item.isOpen = true;
      }
    });
  }
});
const handleClick = (item: any) => {
  router.push(item.path);
  
  // 找到对应的导航项并展开
  menuItems.value.forEach(menuItem => {
    const hasSubItem = menuItem.subItems.some(subItem => subItem.path === item.path);
    if (hasSubItem) {
      menuItem.isOpen = true;
    }
  });
}
// 切换子菜单显示状态
const toggleSubMenu = (index: number) => {
  menuItems.value.forEach((item, i) => {
    if (i === index) {
      item.isOpen = !item.isOpen;
    } else {
      item.isOpen = false;
    }
  });
};

// 添加路由匹配函数
const isActiveRoute = (path: string) => {
  const currentPath = route.path;
  const currentQuery = route.query;
  const pathWithoutQuery = path.split('?')[0];
  const currentPathWithoutQuery = currentPath.split('?')[0];
  
  return pathWithoutQuery === currentPathWithoutQuery;
};
</script>

<style scoped lang="scss">
.help-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20px 0;
  margin: 0 auto;
}

.help-content {
  width: 60%;
  padding: 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;

  @media (max-width: 1280px) {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.help-nav {
  width: 220px;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;

  @media (max-width: 1280px) {
    width: 100%;
    margin-bottom: 10px;
  }
}

.nav-item {
  margin-bottom: 10px;
}

.nav-title {
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-menu {
  margin-left: 10px;
  padding: 5px 0;
}

.sub-item {
  display: block;
  padding: 10px;
  cursor: pointer;
  margin: 5px 0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  border: 3px solid transparent;
  
  &:hover {
    border: 3px solid rgba(48, 167, 75, 1);
    background-color: #fff;
  }
}

:deep(.sub-itemActive) {
  border: 3px solid rgba(48, 167, 75, 1) !important;
  background-color: #fff !important;
  font-weight: bold !important;
}

.help-main {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;

  @media (max-width: 1280px) {
    padding: 15px;
  }
}
.popular {
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;

    @media (max-width: 1280px) {
      font-size: 16px;
      margin-top: 15px;
    }
}
.popular-list {
    width: 58%;
    margin-top: 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    @media (max-width: 1280px) {
      width: 90%;
      margin-top: 15px;
    }
}
.popular-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    
    @media (max-width: 1280px) {
      padding: 15px;
    }
    
    &:last-child {
        border-bottom: none;
    }
    
    .popular-item-title {
        font-size: 14px;
        font-weight: bold !important;
        color: #333;

        @media (max-width: 1280px) {
          font-size: 13px;
        }
    }
    
    &:hover {
        background-color: #f5f5f5;
        cursor: pointer;
    }
    
    &.active {
        border-left: 3px solid rgba(48, 167, 75, 1);
    }
}
</style>